<template>
  <!-- <div class="my-order" ref="container">
    <div class="header bg-color-red">
      <div class="picTxt acea-row row-between-wrapper">
        <div class="text">
          <div class="name">订单信息</div>
          <div>
            累计订单：{{ orderData.order_count || 0 }} 总消费：￥{{
              orderData.sum_price || 0
            }}
          </div>
        </div>
        <div class="pictrue"><img src="@assets/images/orderTime.png" /></div>
      </div>
    </div>
    <div class="nav acea-row row-around">
      <div
        class="item"
        :class="{ on: type === 0 }"
        @click="$router.replace({ path: '/order/list/0' })"
      >
        <div>待付款</div>
        <div class="num">{{ orderData.unpaid_count || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: type === 1 }"
        @click="$router.replace({ path: '/order/list/1' })"
      >
        <div>待发货</div>
        <div class="num">{{ orderData.unshipped_count || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: type === 2 }"
        @click="$router.replace({ path: '/order/list/2' })"
      >
        <div>待收货</div>
        <div class="num">{{ orderData.received_count || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: type === 3 }"
        @click="$router.replace({ path: '/order/list/3' })"
      >
        <div>待评价</div>
        <div class="num">{{ orderData.evaluated_count || 0 }}</div>
      </div>
      <div
        class="item"
        :class="{ on: type === 4 }"
        @click="$router.replace({ path: '/order/list/4' })"
      >
        <div>已完成</div>
        <div class="num">{{ orderData.complete_count || 0 }}</div>
      </div>
    </div>
    <div class="list">
      <div class="item" v-for="order in orderList" :key="order.id">
        <div class="title acea-row row-between-wrapper">
          <div class="acea-row row-middle">
            <span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.combination_id > 0"
              >拼团</span
            ><span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.seckill_id > 0"
              >秒杀</span
            ><span
              class="sign cart-color acea-row row-center-wrapper"
              v-if="order.bargain_id > 0"
              >砍价</span
            >
            {{ order._add_time }}
          </div>
          <div class="font-color-red">{{ getStatus(order) }}</div>
        </div>
        <div @click="$router.push({ path: '/order/detail/' + order.order_id })">
          <div
            class="item-info acea-row row-between row-top"
            v-for="cart in order.cartInfo"
            :key="cart.id"
          >
            <div class="pictrue">
              <img
                :src="cart.productInfo.image"
                @click.stop="
                  $router.push({ path: '/detail/' + cart.productInfo.id })
                "
                v-if="
                  cart.combination_id === 0 &&
                    cart.bargain_id === 0 &&
                    cart.seckill_id === 0
                "
              />
              <img
                :src="cart.productInfo.image"
                @click.stop="
                  $router.push({
                    path: '/activity/group_detail/' + cart.combination_id
                  })
                "
                v-else-if="cart.combination_id > 0"
              />
              <img
                :src="cart.productInfo.image"
                @click.stop="
                  $router.push({
                    path: '/activity/dargain_detail/' + cart.bargain_id
                  })
                "
                v-else-if="cart.bargain_id > 0"
              />
              <img
                :src="cart.productInfo.image"
                @click.stop="
                  $router.push({
                    path: '/activity/seckill_detail/' + cart.seckill_id
                  })
                "
                v-else-if="cart.seckill_id > 0"
              />
            </div>
            <div class="text acea-row row-between">
              <div class="name line2">
                {{ cart.productInfo.store_name }}
              </div>
              <div class="money">
                <div>
                  ￥{{
                    cart.productInfo.attrInfo
                      ? cart.productInfo.attrInfo.price
                      : cart.productInfo.price
                  }}
                </div>
                <div>x{{ cart.cart_num }}</div>
              </div>
            </div>
          </div>
        </div>
        <div class="totalPrice">
          共{{ order.cartInfo.length || 0 }}件商品，总金额
          <span class="money font-color-red">￥{{ order.pay_price }}</span>
        </div>
        <div class="bottom acea-row row-right row-middle">
          <template
            v-if="order._status._type === 0 || order._status._type == 9"
          >
            <div class="bnt cancelBnt" @click="cancelOrder(order)">
              取消订单
            </div>
          </template>
          <template v-if="order._status._type === 0">
            <div class="bnt bg-color-red" @click="paymentTap(order)">
              立即付款
            </div>
          </template>
          <template
            v-if="order._status._type === 1 || order._status._type === 9"
          >
            <div
              class="bnt bg-color-red"
              @click="$router.push({ path: '/order/detail/' + order.order_id })"
            >
              查看详情
            </div>
          </template>
          <template v-if="order._status._type === 2">
            <div
              class="bnt default"
              @click="
                $router.push({ path: '/order/logistics/' + order.order_id })
              "
            >
              查看物流
            </div>
            <div class="bnt bg-color-red" @click="takeOrder(order)">
              确认收货
            </div>
          </template>
          <template v-if="order._status._type === 3">
            <div
              class="bnt default"
              @click="
                $router.push({ path: '/order/logistics/' + order.order_id })
              "
              v-if="order.delivery_type === 'express'"
            >
              查看物流
            </div>
            <div
              class="bnt bg-color-red"
              @click="$router.push({ path: '/order/detail/' + order.order_id })"
            >
              去评价
            </div>
          </template>
          <template v-if="order._status._type === 4">
            <div
              class="bnt bg-color-red"
              @click="$router.push({ path: '/order/detail/' + order.order_id })"
            >
              查看订单
            </div>
          </template>
        </div>
      </div>
    </div>
    <div class="noCart" v-if="orderList.length === 0 && page > 1">
      <div class="pictrue"><img src="@assets/images/noOrder.png" /></div>
    </div>
    <Loading :loaded="loaded" :loading="loading"></Loading>
    <Payment
      v-model="pay"
      :types="payType"
      @checked="toPay"
      :balance="userInfo.now_money"
    ></Payment>
  </div> -->
  
  <el-container>
      <el-header height="172px" style="padding:0 0;">
          <HomeNavigation></HomeNavigation>
          <SearchBox></SearchBox>
          <ClassNavigation></ClassNavigation>
      </el-header>
      <el-container class="order">
        <el-container style="width:1090px;margin:20px auto 0;">
            <el-aside width="180px">
                <div class="side">
                  <el-menu
                  default-active="2-1"
                  active-text-color="#b4a078"
                  @open="handleOpen"
                  @close="handleClose">
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">我的服务</p>
                      <el-menu-item index="1-1">
                         <router-link to="/user">
                          <p class="sideIetm">个人中心</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-2">
                        <router-link to="/user/vip">
                          <p class="sideIetm">会员中心</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-3">
                        <router-link to="/user/add_manage">
                          <p class="sideIetm">地址信息</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="1-4">
                        <router-link to="/collection">
                        <p class="sideIetm">我的收藏</p>
                        </router-link>
                        </el-menu-item>
                      <el-menu-item index="1-5">
                          <router-link to="/user/user_coupon">
                            <p class="sideIetm">优惠券</p>
                          </router-link>
                      </el-menu-item>
                    </el-menu-item-group>
                    <el-menu-item-group>
                      <p slot="title" class="sideTitle">订单管理</p>
                      <el-menu-item index="2-1">
                        <router-link to="/order/list/0">
                          <p class="sideIetm">我的订单</p>
                        </router-link>
                      </el-menu-item>
                      <el-menu-item index="2-2">
                        <router-link to="/order/refund_list"> 
                        <p class="sideIetm">售后/退款</p>
                      </router-link>
                    </el-menu-item>
                    </el-menu-item-group>
                </el-menu>
              </div>
            </el-aside>
          <el-main style="padding: 20px 0 20px 20px;">
            <div class="main">
              <div class="tap">
                  <el-tabs  @tab-click="handleClick" v-model="tapName" >
                      <el-tab-pane name="/order/list/0" label="待付款"></el-tab-pane>
                      <el-tab-pane name="/order/list/1" label="待发货"></el-tab-pane>
                      <el-tab-pane name="/order/list/2" label="待收货"></el-tab-pane>
                      <el-tab-pane name="/order/list/3" label="待评价"></el-tab-pane>
                      <el-tab-pane name="/order/list/4" label="已完成"></el-tab-pane>
                  </el-tabs>
              </div>
              <div class="table" v-for="order in orderList" :key="order.id">
                <div class="tt">
                  {{ order._add_time }}
                </div>
                <div class="td acea-row"  v-for="cart in order.cartInfo" :key="cart.id">
                  <div class="item-1 acea-row">
                    <div class="goods acea-row">
                      <div class="link">
                        <img
                        :src="cart.productInfo.image"
                        @click.stop="
                          $router.push({ path: '/detail/' + cart.productInfo.id })
                        "
                        v-if="
                          cart.combination_id === 0 &&
                            cart.bargain_id === 0 &&
                            cart.seckill_id === 0
                        "
                      />
                      <img
                        :src="cart.productInfo.image"
                        @click.stop="
                          $router.push({
                            path: '/activity/group_detail/' + cart.combination_id
                          })
                        "
                        v-else-if="cart.combination_id > 0"
                      />
                      <img
                        :src="cart.productInfo.image"
                        @click.stop="
                          $router.push({
                            path: '/activity/dargain_detail/' + cart.bargain_id
                          })
                        "
                        v-else-if="cart.bargain_id > 0"
                      />
                      <img
                        :src="cart.productInfo.image"
                        @click.stop="
                          $router.push({
                            path: '/activity/seckill_detail/' + cart.seckill_id
                          })
                        "
                        v-else-if="cart.seckill_id > 0"
                      />
                      </div>
                      <div class="f-fz">{{ cart.productInfo.store_name }}</div>
                    </div>
                    <div class="cell">
                      ￥{{ order.pay_price }}
                    </div>
                    <div  class="cell c-link" v-if="order._status._type === 0">
                      <div @click="cancelOrder(order)">
                        取消订单
                      </div>
                    </div>
                    <div class="cell c-link"  v-if="order._status._type === 1||order._status._type === 2||order._status._type === 3||order._status._type === 4" @click.stop="$router.push({ path: '/detail/' + cart.productInfo.id })">再次购买</div>
                  </div>
                  <div class="item-2">
                      <div class="c-link" @click="paymentTap(order)" v-if="order._status._type === 0">
                          立即付款
                      </div>
                      <div class="c-link" @click="takeOrder(order)" v-if="order._status._type === 2">
                          确认收货
                      </div>
                      <div class="c-link" @click="$router.push({ path: '/order/detail/' + order.order_id })" v-if="order._status._type === 3">
                      去评价
                    </div>
                  </div>
                  <div class="item-3"  @click="$router.push({ path: '/order/detail/' + order.order_id })">
                    查看详情  
                  </div>
                </div>
              </div>
              <div class="noCart" v-if="orderList.length === 0 && page > 1">
                <img src="@assets/images/noOrder.png" />
              </div>
            </div>
          </el-main>
        </el-container>
        <el-footer style="padding: 0;">
        <Foot></Foot>
        </el-footer>
      </el-container>
  </el-container>

</template>
<script>
import { getOrderData, getOrderList } from "@api/order";
import {
  cancelOrderHandle,
  payOrderHandle,
  takeOrderHandle
} from "@libs/order";
import Loading from "@components/Loading";
import Payment from "@components/Payment";
import { mapGetters } from "vuex";
import { isWeixin } from "@utils";
import HomeNavigation from "@components/HomeNavigation";
import ClassNavigation from "@components/ClassNavigation";
import SearchBox from "@components/SearchBox";
import Foot from "@components/Foot";

const STATUS = [
  "待付款",
  "待发货",
  "待收货",
  "待评价",
  "已完成",
  "",
  "",
  "",
  "",
  "待付款"
];

const NAME = "MyOrder";

export default {
  name: NAME,
  data() {
    return {
      offlinePayStatus: 2,
      orderData: {},
      tapName:"/order/list/0",
      type: parseInt(this.$route.params.type) || 0,
      page: 1,
      limit: 20,
      loaded: false,
      loading: false,
      orderList: [],
      pay: false,
      payType: ["yue", "weixin"],
      from: isWeixin() ? "weixin" : "weixinh5"
    };
  },
  components: {
    Loading,
    Payment,
    HomeNavigation,
    ClassNavigation,
    SearchBox,
    Foot
  },
  computed: mapGetters(["userInfo"]),
  watch: {
    $route(n) {
      if (n.name === NAME) {
        const type = parseInt(this.$route.params.type) || 0;
        if (this.type !== type) {
          this.changeType(type);
        }
        this.getOrderData();
      }
    }
  },
  methods: {
    setOfflinePayStatus: function(status) {
      var that = this;
      that.offlinePayStatus = status;
      if (status === 1) {
        if (that.payType.indexOf("offline") < 0) {
          that.payType.push("offline");
        }
      }
    },
    handleClick(e) {
      this.$router.replace({ path: e.name });
      console.log("STATUS"+e.name)
    },
    myOrder(){
      this.$router.replace({ path: "/order/list/0" });
    },
    getOrderData() {
      getOrderData().then(res => {
        this.orderData = res.data;
      });
    },
    takeOrder(order) {
      takeOrderHandle(order.order_id).finally(() => {
        this.reload();
        this.getOrderData();
      });
    },
    reload() {
      this.changeType(this.type);
    },
    changeType(type) {
      this.type = type;
      this.orderList = [];
      this.page = 1;
      this.loaded = false;
      this.loading = false;
      this.getOrderList();
    },
    getOrderList() {
      if (this.loading || this.loaded) return;
      this.loading = true;
      const { page, limit, type } = this;
      getOrderList({
        page,
        limit,
        type
      }).then(res => {
        this.orderList = this.orderList.concat(res.data);
        this.page++;
        this.loaded = res.data.length < this.limit;
        this.loading = false;
      });
    },
    getStatus(order) {
      return STATUS[order._status._type];
    },
    cancelOrder(order) {
      cancelOrderHandle(order.order_id)
        .then(() => {
          this.orderList.splice(this.orderList.indexOf(order), 1);
        })
        .catch(() => {
          this.reload();
        });
    },
    paymentTap: function(order) {
      var that = this;
      if (
        !(
          order.combination_id > 0 ||
          order.bargain_id > 0 ||
          order.seckill_id > 0
        )
      ) {
        that.setOfflinePayStatus(order.offlinePayStatus);
      }
      this.pay = true;
      this.toPay = type => {
        payOrderHandle(order.order_id, type, that.from)
          .then(() => {
            const type = parseInt(this.$route.params.type) || 0;
            that.changeType(type);
            that.getOrderData();
          })
          .catch(res => {
            if (res.status === "WECHAT_H5_PAY")
              return that.$router.push({
                path: "/order/status/" + order.order_id + "/5"
              });
            const type = parseInt(that.$route.params.type) || 0;
            that.changeType(type);
            that.getOrderData();
          });
      };
    },
    toPay() {}
  },
  mounted() {
    this.getOrderData();
    this.getOrderList();
    this.$scroll(this.$refs.container, () => {
      !this.loading && this.getOrderList();
    });
  }
};
</script>

<style scoped>
  .order {
    background-color: #fff;
  }
  .order .side {
    border: 1px solid #eaeaea;
    height:510px;
    padding-top: 24px;
    margin-top: 20px;
  }
  .order .side .sideTitle {
    font-size: 16px;
    color: #333;
    font-weight: 700;
    padding-left: 23px;
  }

  .order .side .sideIetm {
    font-size: 14px;
    padding-left: 23px;
  }
  .order  .main {
    width: 890px;
  }
  .order  .main .tap {
    margin-top: 10px;
  }
  .order  .main .tap >>> .el-tabs__item {
    font-size: 18px;
    line-height: 1;
    font-weight: 700;
    height: 30px;
    
  }
  .order  .main .noCart {
    width: 414px;
    height: 336px;
    margin: 150px auto;
  }
  .order  .main .noCart img {
    width: 100%;
    height: 100%;
  }
  .order  .main .table {
    width: 890px;
    border: 1px solid #eaeaea;
    margin-bottom: 20px;
  }
  .order  .main .table .tt {
    width: 888px;
    height: 42px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
    font-size: 12px;
    text-align: left;
    font-weight: 400;
    background-color: #f5f5f5;
    line-height: 41px;
    padding-left: 20px;
    
  }
  .order  .main .table .tt .line1 {
    width: 265px;
    margin-left: 10px;
  }
  .order  .main .table .td {
    width: 888px;
    height: 140px;
    padding: 20px 0;
    font-size: 14px;
    font-family: "Microsoft Yahei","微软雅黑",verdana;
    color: #333;
  }
  .order  .main .table .td  .goods {
    width: 338px;
    margin-left: 20px;
  }
  .order  .main .table .td  .goods .link {
    width: 100px;
    height: 100px;
    margin-right: 10px;

  }
  .order  .main .table .td  .goods .link img {
    width: 100%;
    height: 100%;
    cursor: pointer;
  }
  .order  .main .table .td  .goods .f-fz {
    width: 215px;
    height: 38px;
    overflow: hidden; /*自动隐藏文字*/
    text-overflow: ellipsis;/*文字隐藏后添加省略号*/
    margin:  auto 0;
  }
  .order  .main .table .td .cell {
    width: 130px;
    height: 19px;
    text-align: center;
    line-height: 19px;
    margin: auto 0;
  }
  .order  .main .table .td .c-link {
    cursor: pointer;
    color: #69c;
  }
  .order  .main .table .td .item-1 {
    width: 618px;
  }
  .order  .main .table .td .item-2 {
    width: 140px;
    margin: auto 0;
    text-align: center;
  }
  .order  .main .table .td .item-3 {
    width: 130px;
    margin: auto 0;
    text-align: center;
    cursor: pointer;
    color: #69c;
  }
</style>
